<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/content/variable.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <%@ include file="/content/head.jsp" %>
</head>
<body>
<section class="content-header">
    <h1>
        韩国视频
        <small>韩国视频内容</small>
    </h1>
</section>
<!-- Main content -->
<section class="content">

    <div class="row">
        <!-- BEGIN SAMPLE TABLE PORTLET-->
        <div class="col-md-12">
            <!-- BEGIN SAMPLE TABLE PORTLET-->
            <div class="panel-body" style="padding-bottom:0px;">
                <div class="panel panel-default">
                    <div class="panel-heading">查询条件</div>
                    <div class="panel-body">
                        <form id="formSearch" class="form-horizontal">
                            <div class="form-group" style="margin-top:10px">
                                <label class="control-label col-sm-1" for="videoClassification">视频名称：</label>
                                <div class="col-sm-2">
                                    <input type="text" class="form-control" style="width: 50%" name="videoName" id="videoName">
                                </div>
                                <label class="control-label col-sm-1" for="classification">分类：</label>
                                <div class="col-sm-2">
                                    <div class="input-group select2-bootstrap-prepend">
                                        <select id="classification" class="form-control select2">
                                            <option value="-1">全部</option>
                                            <option value="1">大片</option>
                                            <option value="2">电影分类</option>
                                        </select>
                                    </div>
                                </div>
                                <label class="control-label col-sm-1" for="videoClassification">视频分类：</label>
                                <div class="col-sm-2">
                                    <div class="input-group select2-bootstrap-prepend">
                                        <select id="videoClassification" class="form-control select2">
                                            <option value="-1">全部</option>
                                            <option value="1">热门</option>
                                            <option value="2">最新</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="pull-right">
                                <button type="button" onclick="refresh();" style="margin-left:50px" id="btn_query"
                                        class="btn btn-primary">查询
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="box-body" style="padding-bottom: 0px;">
                <div id="toolbar" class="btn-group">
                    <button id="btn_add" type="button" onclick="addInfo()" class="btn btn-default create">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                </div>
                <!--展示页面 -->
                <div class="table-scrollable">
                    <table id="tb_departments" class="table-scrollable table table-hover"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<%@ include file="/content/js.jsp" %>
</body>
<script>
    //新增弹出子窗口
    function addInfo() {
        modalOpen({
            id: "Form",
            title: '新增内容',
            url: '<%=path%>/korean/video/addVideo',
            width: "700px",
            height: "650px",
        });
    }

    //修改子页面
    function alertInfo(id) {
        modalOpen({
            id: "Form",
            title: '修改内容',
            url: '<%=path%>/korean/video/alertVideo?id=' + id,
            width: "700px",
            height: "650px",
        });
    }

    //编辑详情内容
    function alertDetailInfo(id) {
        <%--modalOpen({--%>
            <%--id: "Form",--%>
            <%--title: '编辑详情内容',--%>
            <%--url: '<%=path%>/korean/video/addVideoDetail?id=' + id,--%>
            <%--width: "700px",--%>
            <%--height: "650px",--%>
        <%--});--%>

        window.location.href = '<%=path%>/korean/video/addVideoDetail?id=' + id;
    }
    //删除
    function deleteInfo(id) {
        layer.msg('是否确认删除？', {
            time: 0 //不自动关闭
            , btn: ['确认', '取消']
            , yes: function (index) {
                layer.close(index);
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "<%=path %>/korean/video/deleteVideo",
                    data: {id: id},
                    dataType: "json",
                    success: function (data) {
                        if (data.missage == "success") {
                            layer.msg('删除成功');
                        } else {
                            layer.msg('删除失败');
                        }
                        RefreshFather();
                    }
                });
            }
        });
    }

    //刷新父页面
    function RefreshFather() {
        $('#tb_departments').bootstrapTable(
            "refresh",
            {
                url: "<%=path %>/korean/video/videoList"
            }
        );
    }

    function refresh() {
        $('#tb_departments').bootstrapTable('refresh', {url: '<%=path %>/korean/video/videoList'});
    }

    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
    });

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '<%=path %>/korean/video/videoList', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: false, //是否启用排序
                sortOrder: "asc", //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: true, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
// 				height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                queryParams: function (params) {
                    return {
                        limit: params.limit, //页面大小
                        offset: params.offset, //页码
                        videoName: $.trim($('#videoName').val()),
                        classification: $('#classification option:selected').val(),
                        videoClassification: $('#videoClassification option:selected').val(),
                    };
                },
                rowStyle: function (row, index) {
                    var classes = ['active', 'success', 'info', 'warning', 'danger'];

                    if (index % 2 === 0 && index / 2 < classes.length) {
                        return {
                            classes: classes[index / 2]
                        };
                    }
                    return {};
                },
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID'
                }, {
                    field: 'videoName',
                    title: '视频名称'
                },{
                    field:'classification',
                    title:'分类',
                    width: 80,
                    formatter:function (value) {
                        if(value==1){
                            return ' <span class="label label-sm label-success">大片</span>';
                        }else if (value == 2) {
                            return ' <span class="label label-sm label-warning">电影分类</span>';
                        }
                    }
                }, {
                    field: 'videoCover',
                    title: '视频封面',
                    formatter: function (value, row) {
                        return "<img src=" + row.videoCover + "  width='100' height='100'>";
                    }
                },{
                    field: 'videoHorizontalScreenImage',
                    title: '横屏封面',
                    formatter: function (value, row) {
                        return "<img src=" + value + "  width='100' height='100'>";
                    }
                }, {
                    field: 'videoUrl',
                    title: '视频地址',
                    formatter: function (value, row) {
                        return '<video src="' + row.videoUrl + '" width="150" height="150"  controls="controls">浏览器不支持预览</video>'

                    }
                }, {
                    field: 'videoTime',
                    title: '视频时长'
                }, {
                    field: 'videoDesc',
                    title: '视频简介'
                }, {
                    field: 'videoType',
                    title: '视频类型'
                },{
                    field:'videoClassification',
                    title:'视频分类',
                    width: 80,
                    formatter:function (value) {
                        if(value==1){
                            return ' <span class="label label-sm label-success">热门</span>';
                        }else if (value == 2) {
                            return ' <span class="label label-sm label-warning">最新</span>';
                        }
                    }
                },{
                    field: 'videoWeight',
                    title: '权重',
                    width: 80,
                },{
                        title: '操作',
                        formatter: function (value, row) {
                            return '<a href="javascript:alertInfo(' + row.id + ');" class="btn btn-icon-only purple mod"><i class="fa fa-edit mod">修改</i></a>' +
                                '<a href="javascript:alertDetailInfo(' + row.id + ');" class="btn btn-icon-only purple mod"><i class="fa fa-edit mod">编辑详情</i></a>';
                                // '<a href="javascript:deleteInfo(' + row.id + ');" class="btn btn-icon-only red"> <i class="fa fa-times">删除</i></a>';
                        }
                    },]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit, //页面大小
                offset: params.offset, //页码
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };

    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};
        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };
        return oInit;
    };
</script>
</html>